// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引入后并使用Vuex插件，在store创建前。
Vue.use(Vuex); // 引入并使用了vuex后，就可以在vm创建时传入一个store配置项了。

// 创建并暴露Store
export default new Vuex.Store({
    // 准备actions—用于响应组件中的动作
    actions:{
        /*
            actions：'业务逻辑'和'后端交互代码'写在这里，其中定义的所有操作方法名称为组件调用dispatch()时定义的操作名称。
            方法参数：
                '第一个参数'固定是context，其中包含了actions中要通知mutations的commit()；还有state对象（可以直接操作共享数据）
                '第二个参数'为组件调用dispatch()时传递的数据。
        */

        // 为奇数再加
        incrementOdd(context,value){
            if(context.state.sum %2 !== 0) context.state.sum += value;
        },

        // 等一等再加
        incrementWait(context,value){
            setTimeout(()=>{
                // 通过组件调用dispatch时，actions接收到的context来执行commit()，通知mutations执行'加'的操作。
                context.commit('INCREMENT' ,value); // 传递两个参数：操作名（走到这一步，操作名用'英文大写'更好区分是走到了Mutations）、数据
            } ,500)
        },

        // 添加人员信息
        addPreson(context,value){
            context.commit('ADDPERSON' ,value);
        }
    },

    // 准备mutations—用于操作数据（state）
    mutations:{
        /*
            mutations：走到这一步也可以对state中的数据进行操作（操作方法名和actions中调用的对应名称，名称尽量用'英文大写'）
            方法参数：
                '第一个参数'固定是state对象，可以直接对state中存储的共享数据进行操作。
                '第二个参数'为actions调用commit()时传递的数据。
        */

        // 加
        INCREMENT(state,value){
            // console.log('mutations中的INCREMENT被调用了',state,value);

            state.sum += value;
        },

        // 减
        DECREMENT(state,value){
            state.sum -= value;
        },

        // 添加人员信息
        ADDPERSON(state,value){
            console.log('mutations中的ADDPERSON被调用了');
            // 添加
            state.personList.unshift(value);
        }
    },

    // 准备state—用于存储数据（初始化数据）
    state:{
        sum:0,  // 当前的和,
        school:'广西科师', // 学校名称
        subject:'Vue', // 课程名称
        personList:[
            {id:'001' ,name:'覃小宝'},
            {id:'002' ,name:'张三'},
            {id:'003' ,name:'李四'},
            {id:'004' ,name:'王五'}
        ],
    },

    // 准备getters—用于将state中的数据进行加工
    getters:{
        /*
            getters：相当于一个可以共享的计算属性computed，单个组件内的计算属性只能自己使用，getters对state加工的数据所有组件都可以用
        */
        bigSum(state){
            return state.sum * 10
        }
    }
})